<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
Ext.onReady(function() {
	
	Ext.QuickTips.init();
	
	Ext.define('Role', { 
        extend: 'Ext.data.Model', 
        // fields定义字段和数据类型 
        fields: [
                 {type: 'string', name: 'id'},
                 {type: 'string', name: 'roleName'}]
    });
	
	 //定义数据集 
    var newstore = Ext.create('Ext.data.Store', {
        model: 'Role',
        autoLoad: false,
        proxy: { 
            type: 'ajax', 
            url: '../service/user_find',
            //Reader 解码json数据 
            reader: { 
                type: 'json', 
                root: 'oaroles', 
                total: 'total'
            }
        },
        listeners:{
	        'load':function(){
	        	var s="";
                newstore.each(function(record) {
                s+=record.get('id')+",";
                });
                Ext.getCmp('roles').setValue(s);
	        }
        }
    });
	 
  //定义数据集 
    var rolestore = Ext.create('Ext.data.Store', {
        model: 'Role', 
        autoLoad: true,
        //使用ajax代理 
        proxy: { 
            type: 'ajax', 
            url: '../service/role_allrole',
            //Reader 解码json数据 
            reader: { 
                type: 'json', 
                root: 'root', 
                total: 'total'
            }
        }
    });
	
	var formadd=Ext.widget({
        xtype: 'form',
        layout: 'form',
        renderTo:'updateuser',
        frame:true,
        fieldDefaults: {
            msgTarget: 'qtip',
            labelWidth: 40
        },
        defaultType: 'textfield',
        items: [{
        	id:'username',
            fieldLabel: '账号',
            name: 'user.username',
            allowBlank: false
        },{
        	id:'displayName',
            fieldLabel: '名称',
            name: 'user.displayName',
            allowBlank: false
        },{
            xtype: 'radiogroup',
            fieldLabel: '性别',
            // Arrange radio buttons into two columns, distributed vertically
            items: [
                { boxLabel: '男', name: 'user.sex', inputValue: 1,id:'sex1'},
                { boxLabel: '女', name: 'user.sex', inputValue: 0,id:'sex0',},
            ]
        },{
            fieldLabel: '手机',
            id:'phone',
            name: 'user.phone',
            allowBlank: false,
        }, {
            fieldLabel: '固话',
            id:'telephone',
            name: 'user.telephone',
        },{
        	id:'roles',
            fieldLabel: '权限',
            name: 'roles',
            hidden:true,
        },Ext.create('Ext.grid.Panel', {
        	title:'用户角色列表',
        	store:newstore,
        	height:180,
            columns: [ 
            { 
                text: '角色', width: 100, sortable: true, dataIndex: 'roleName', editor: 'textfield'
            },{
            	text: '删除',
                xtype: 'actioncolumn',
                width: 50,
                items: [{
                    icon   : '../EXT4/fam/cross.gif"',  // Use a URL in the icon config
                    tooltip: '删除',
                    handler: function(grid, rowIndex, colIndex) {
                    	var rec = grid.getStore().getAt(rowIndex);
                    	Ext.MessageBox.confirm("确认","确认删除用户角色:"+rec.get('roleName'),function(btn){
                    		if(btn=='yes'){
                    			grid.getStore().removeAt(rowIndex);
                    			var s="";
                    			newstore.each(function(record) {
                        			s+=record.get('id')+",";
                        		});
                    			Ext.getCmp('roles').setValue(s);
                    		}  
                        }); 
                    }
                }]
            }],
            tbar : [{
            	id:'comb',
            	xtype:'combobox',
                width:200,
                store: rolestore,
                valueField:'id',
                displayField: 'roleName',
                editable:false
            },{
                xtype : 'button',  
                text : '新增',
                handler: function() {
                	var comb=Ext.getCmp('comb');
                	if(!comb.getValue()){
                		Ext.Msg.alert('提示','请先选择角色');
                	}else if(newstore.find('id',comb.getValue())==-1){
                		newstore.add({"id":comb.getValue(),"roleName":comb.getRawValue()});
                		var s="";
            			newstore.each(function(record) {
                			s+=record.get('id')+",";
                		});
            			Ext.getCmp('roles').setValue(s);
                	}else{
                		Ext.Msg.alert('提示','该角色已被添加');
                	}
                }
            }]
        })],
        buttons: [{
        	text: '确定',
        	handler: function() {
        		if(formadd.getForm().isValid()){
        			formadd.getForm().submit({  
                           url : '../service/user_update',//请求的url地址  
                           method:'post',//请求方式
                           params: {
		        		       id: Ext.getDom('userid').value
		        		   },
                           success:function(form,action){//加载成功的处理函数  
                          	Ext.Msg.alert('提示', action.result.msg);
                          	Ext.getCmp('updatewin').close();
                           },
                           failure:function(form,action){//加载成功的处理函数  
           		        	Ext.Msg.alert('提示', action.result.msg); 
           		        	}
                       });
              	 }
        	}
        },{
            text: '重置',
            handler: function() {
            	newstore.load({
		    params: {
		        id: Ext.getDom('userid').value
		        }
		    });
    		Ext.Ajax.request({
    		    url: '../service/user_find',
    		    params: {
    		        id: Ext.getDom('userid').value
    		    },
    		    success: function(response, opts) {
    		        var obj = Ext.decode(response.responseText);
    		        Ext.getCmp('username').setValue(obj.user.username);
    		        Ext.getCmp('displayName').setValue(obj.user.displayName);
    		        if(obj.user.sex==1){
    		        	Ext.getCmp('sex1').setValue(true);
    		        }else{
    		        	Ext.getCmp('sex0').setValue(true);
    		        }
    		        Ext.getCmp('phone').setValue(obj.user.phone);
    		        Ext.getCmp('telephone').setValue(obj.user.telephone);
    		    },
    		});
            }
        }],
        listeners:{
        	'render':function(){
        		newstore.load({
			    params: {
			        id: Ext.getDom('userid').value
			        }
			    });
        		Ext.Ajax.request({
        		    url: '../service/user_find',
        		    params: {
        		        id: Ext.getDom('userid').value
        		    },
        		    success: function(response, opts) {
        		        var obj = Ext.decode(response.responseText);
        		        Ext.getCmp('username').setValue(obj.user.username);
        		        Ext.getCmp('displayName').setValue(obj.user.displayName);
        		        if(obj.user.sex==1){
        		        	Ext.getCmp('sex1').setValue(true);
        		        }else{
        		        	Ext.getCmp('sex0').setValue(true);
        		        }
        		        Ext.getCmp('phone').setValue(obj.user.phone);
        		        Ext.getCmp('telephone').setValue(obj.user.telephone);
        		    },
        		});
        	}
        }
    });
});
</script>
</head>
<body>
<input type="hidden" id="userid" value="<s:property value='id'/>"/>
<div id="updateuser"></div>
</body>
</html>